<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event Slide Menu</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
</style>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
	
	$('body').css({
		'font-family' : 'Nanum Gothic Coding, serif'
	});	
	
	// 가장 큰 메뉴 크기를 설정
	$('#menu').css({
		'width' : '200px'
		
	});
	
	// 버튼의 css 설정
	$('.btn').css({
		'width' : '100%',
		'height' : '30px',
		'border' : '2px solid #79ABFF',
		'cursor' : 'pointer',
		'background-color' : '#FAECC5'
	});
	
	// sub Menu 설정
	$('.sub_menu').css({
		'width' : '98%',
		'padding-top' : '10px',
		'padding-bottom' : '20px',
		'border' : '2px double #AFE1FF'
	});
	
	// sub Menu 효과주기
	$('.sub_menu').hide();
	
	$('#btnSlideToggle1').click(function(){
		$('.sub_menu').slideUp('slow');
		
		$('#sub_menu1').slideToggle('fast', function(){
			if($(this).is(':hidden')){
				$('#btnSlideToggle1').css('background-color', '#FAECC5');
			}else{
				$('#btnSlideToggle1').css('background-color', '#C9AA56');
				$('#btnSlideToggle2').css('background-color', '#FAECC5');
				$('#btnSlideToggle3').css('background-color', '#FAECC5');
				$('#btnSlideToggle4').css('background-color', '#FAECC5');
			}

		});
	});
	
	$('#btnSlideToggle2').click(function(){
		$('.sub_menu').slideUp('slow');
		
		$('#sub_menu2').slideToggle('fast', function(){
			if($(this).is(':hidden')){
				$('#btnSlideToggle2').css('background-color', '#FAECC5');
			}else{
				$('#btnSlideToggle1').css('background-color', '#FAECC5');
				$('#btnSlideToggle2').css('background-color', '#C9AA56');
				$('#btnSlideToggle3').css('background-color', '#FAECC5');
				$('#btnSlideToggle4').css('background-color', '#FAECC5');
			}
			
			
		});
	});
	
	$('#btnSlideToggle3').click(function(){
		$('.sub_menu').slideUp('slow');
		
		$('#sub_menu3').slideToggle('fast', function(){
			if($(this).is(':hidden')){
				$('#btnSlideToggle3').css('background-color', '#FAECC5');
			}else{
				$('#btnSlideToggle1').css('background-color', '#FAECC5');
				$('#btnSlideToggle2').css('background-color', '#FAECC5');
				$('#btnSlideToggle3').css('background-color', '#C9AA56');
				$('#btnSlideToggle4').css('background-color', '#FAECC5');
			}
			
		});
	});
	
	$('#btnSlideToggle4').click(function(){
		$('.sub_menu').slideUp('slow');
		
		$('#sub_menu4').slideToggle('fast', function(){
			if($(this).is(':hidden')){
				$('#btnSlideToggle4').css('background-color', '#FAECC5');
			}else{
				$('#btnSlideToggle1').css('background-color', '#FAECC5');
				$('#btnSlideToggle2').css('background-color', '#FAECC5');
				$('#btnSlideToggle3').css('background-color', '#FAECC5');
				$('#btnSlideToggle4').css('background-color', '#C9AA56');
			}
			
		});
	});
	
	
});
</script>
</head>
<body>

<div id="menu">
	<input type="button" id="btnSlideToggle1" value="회사소개" class="btn">
	<div id="sub_menu1" class="sub_menu">
		<li>비전소개</li>
		<li>CI 소개</li>
		<li>직원소개</li>
	</div>
	
	<input type="button" id="btnSlideToggle2" value="커뮤니티" class="btn">
	<div id="sub_menu2" class="sub_menu">
		<li>자유게시판</li>
		<li>공지게시판</li>
		<li>익명게시판</li>
	</div>
	
	<input type="button" id="btnSlideToggle3" value="갤러리" class="btn">
	<div id="sub_menu3" class="sub_menu">
		<li>박물관</li>
		<li>미술관</li>
		<li>회사내부</li>
	</div>
	
	<input type="button" id="btnSlideToggle4" value="일정표" class="btn">
	<div id="sub_menu4" class="sub_menu">
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>
	</div>
	
</div>

</body>
</html>